<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>简易画板</title>
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <canvas id="canvas"></canvas>
    <div id="toggle">
      <svg class="icon close" id="toggleClose">
        <use href="#icon-close" class="close"></use>
      </svg>
      <svg class="icon open show"  id="toggleOpen">
        <use href="#icon-open" class="open"></use>
      </svg>
    </div>
    <div id="tools">
      <div class="button">
        <button id="clear">
          <svg class="icon">
            <use href="#icon-clear"></use>
          </svg>
        </button>
        <button id="download">
          <svg class="icon" >
            <use href="#icon-download"></use>
          </svg>
        </button>
      </div>
      <ol class="colors">
        <li id="black" class="active black"></li>
        <li id="red" class="red"></li>
        <li id="green" class="green"></li>
        <li id="blue" class="blue"></li>
        <input type="color" name="" id="currentColor"/>
      </ol>
      <div class="sizes">
        <input
          type="range"
          id="range"
          name="range"
          min="1"
          max="20"
          value="5"
        />
      </div>
    </div>
    <script src="./main.js"></script>
    <script src="//at.alicdn.com/t/font_2159757_jmk1847s6o.js"></script>
  </body>
</html>
